import React from 'react'
import { Modal, Form, Input, Icon, Popover, Button, Tag } from 'antd'
import { LwjSowPicList, Loader } from 'components'
import { auditStatus } from "utils/enumConfig"
import styles from "./List.less"
import moment from 'moment'

let colors = {
  'UNSUBMIT': '',
  'PENDING': 'blue',
  'AUDIT_SUCCESS': 'green',
  'AUDIT_FAIL': 'red'
};
let auditTypes = {
  'INAUDIT': '入驻审核',
  'REALNAME': '实名认证审核',
  'BUSINESS_LICENSE': '营业执照审核'
};
let auditFlags = {
  'SUCCESS': '通过',
  'FAIL': '不通过'
};
const { TextArea } = Input;
const StoreDetailModal = ({ currentItem, auditItem, detailVisible, auditVisible, editVisible, dispatch, loading }) => {
  const changeStatus = (auditType, auditFlag, auditVersion, auditReason) => {
    if (auditFlag == 'SUCCESS') {
      dispatch({
        type: 'salesDistributorRegistryApply/approve',
        params: {
          auditType: auditType,
          id: currentItem.id,
          version: auditVersion
        }
      })
    } else {
      dispatch({
        type: 'salesDistributorRegistryApply/deny',
        params: {
          auditType: auditType,
          id: currentItem.id,
          version: auditVersion,
          memo: auditReason
        }
      })
    }
  }

  const openChangeStatus = (auditType, auditFlag, auditVersion) => {
    dispatch({
      type: 'salesDistributorRegistryApply/toggleAuditVisible',
      auditItem: {
        auditType,
        auditFlag,
        auditVersion
      },
      auditVisible: true
    })
  }

  const toggleEditVisible = (flag) => {
    if(flag){
      currentItem.copyDisplayName = currentItem.displayName;
    }
    dispatch({
      type: 'salesDistributorRegistryApply/toggleEditVisible',
      currentItem: currentItem,
      editVisible: true
    })
  }

  const setDisplayName = (e) => {
    currentItem.copyDisplayName = e.target.value;
    dispatch({
      type: 'salesDistributorRegistryApply/setCurrentItem',
      payload: currentItem
    })
  }

  return(
    <div>
      <Modal footer={null} visible={detailVisible} width={800} title={"入驻详情"} className={styles.registryModal} onCancel={() => {
        dispatch({
          type: 'salesDistributorRegistryApply/setDetailVisible',
          detailVisible: false
        })
        dispatch({
          type: 'salesDistributorRegistryApply/setCurrentItem',
          payload: {}
        })
      }}>
        <div className={styles.item}>
          <div className={styles.title}>
            <span>基础信息</span>
          </div>
          <div className={styles.info}>
            <div>
              <Icon type="home" className={styles.gap} />门店名称：{currentItem.name}
            </div>
            <div>
              <Icon type="tag" className={styles.gap} />门店编码：{currentItem.distributorCode}
            </div>
            <div>
              <Icon type="user" className={styles.gap} />手机号码：{currentItem.mobile}
            </div>
            <div>
              <Icon type="environment" className={styles.gap} />地址：{currentItem.provinceName}{currentItem.cityName}{currentItem.districtName}{currentItem.address}
            </div>
          </div>
        </div>
        <div className={styles.item}>
          <div className={styles.title}>
            <span>入驻审核</span>
            {
              currentItem.auditStatus
                ? (<Tag color={colors[currentItem.auditStatus]} style={{ fontWeight: 'normal' }}>{auditStatus[currentItem.auditStatus]}</Tag>)
                : null
            }
            {
              currentItem.auditStatus == 'PENDING'
                ? (<div className={styles.btns}>
                  <Button type="primary" size="small" onClick={() => changeStatus('INAUDIT', 'SUCCESS', currentItem.version)}>通过</Button>
                  <Button size="small" onClick={() => openChangeStatus('INAUDIT', 'FAIL', currentItem.version)}>不通过</Button>
                </div>)
                : null
            }
            {currentItem.auditStatus === 'PENDING' ? moment(currentItem.createTime).format("YYYY-MM-DD HH:mm:ss") : (currentItem.auditStatus ? moment(currentItem.auditAt).format("YYYY-MM-DD HH:mm:ss") : null)}
          </div>
          <div className={styles.info}>
            <div>
              店铺名称：{currentItem.displayName} {currentItem.auditStatus == 'PENDING' ? (<a onClick={() => toggleEditVisible(true)}>编辑</a>) : null}
            </div>
            <div>
              {
                currentItem.enterPicArr && currentItem.enterPicArr.map((val, index) => (
                  <div className={styles.pic} key={index}>
                    <LwjSowPicList width='80px' fileLists={val} />
                  </div>
                ))
              }
            </div>
          </div>
        </div>
        <div className={styles.item}>
          <div className={styles.title}>
            <span>实名认证</span>
            {
              currentItem.realNameAuditStatus
                ? (<Tag color={colors[currentItem.realNameAuditStatus]} style={{ fontWeight: 'normal' }}>{auditStatus[currentItem.realNameAuditStatus]}</Tag>)
                : null
            }
            {
              currentItem.auditStatus != 'AUDIT_SUCCESS' && currentItem.realNameAuditStatus == 'PENDING'
                ? (<div className={styles.tip}>(入驻资格审核成功之后可以进行实名认证审核)</div>)
                : null
            }
            {
              currentItem.auditStatus == 'AUDIT_SUCCESS' && (!currentItem.realNameAuditStatus || currentItem.realNameAuditStatus == 'PENDING')
                ? (<div className={styles.btns}>
                  <Button type="primary" size="small" onClick={() => changeStatus('REALNAME', 'SUCCESS', currentItem.version)}>通过</Button>
                  <Button size="small" onClick={() => openChangeStatus('REALNAME', 'FAIL', currentItem.version)}>不通过</Button>
                </div>)
                : null
            }
          </div>
          <div className={styles.info}>
            <div>
              姓名：{currentItem.userName}
            </div>
            <div>
              身份证号：{currentItem.userIdentityNum}
            </div>
            <div>
              <div className={styles.pic}>
                {
                  currentItem.idCardFrontPic
                    ? (<LwjSowPicList width='80px' fileLists={currentItem.idCardFrontPic} />)
                    : null
                }
              </div>
              <div className={styles.pic}>
                {
                  currentItem.idCardBackPic
                    ? <LwjSowPicList width='80px' fileLists={currentItem.idCardBackPic} />
                    : null
                }
              </div>
            </div>
          </div>
        </div>
        <div className={styles.item}>
          <div className={styles.title}>
            <span>营业执照</span>
            {
              currentItem.businessAuditStatus
                ? (<Tag color={colors[currentItem.businessAuditStatus]} style={{ fontWeight: 'normal' }}>{auditStatus[currentItem.businessAuditStatus]}</Tag>)
                : null
            }
            {
              currentItem.auditStatus != 'AUDIT_SUCCESS' && currentItem.businessAuditStatus == 'PENDING'
                ? (<div className={styles.tip}>(入驻资格审核成功之后可以进行营业执照审核)</div>)
                : null
            }
            {
              currentItem.auditStatus == 'AUDIT_SUCCESS' && (!currentItem.businessAuditStatus || currentItem.businessAuditStatus == 'PENDING')
                ? (<div className={styles.btns}>
                  <Button type="primary" size="small" onClick={() => changeStatus('BUSINESS_LICENSE', 'SUCCESS', currentItem.version)}>通过</Button>
                  <Button size="small" onClick={() => openChangeStatus('BUSINESS_LICENSE', 'FAIL', currentItem.version)}>不通过</Button>
                </div>)
                : null
            }
          </div>
          <div className={styles.info}>
            <div>
              企业名称：{currentItem.enterpriseName}
            </div>
            <div>
              统一社会信用编号：{currentItem.registrationNumber}
            </div>
            <div>
              <div className={styles.pic}>
                {
                  currentItem.businessLicensePic
                    ? (<LwjSowPicList width='80px' fileLists={currentItem.businessLicensePic} />)
                    : null
                }
              </div>
            </div>
          </div>
        </div>
        <Loader spinning={loading.effects['salesDistributorRegistryApply/approve']} />
        <Loader spinning={loading.effects['salesDistributorRegistryApply/detail']} />
      </Modal>
      <Modal footer={null} visible={auditVisible} width={400} style={{top: '200px'}} title={auditTypes[auditItem.auditType]} className={styles.registryModal}
        onCancel={() => {
          dispatch({
            type: 'salesDistributorRegistryApply/toggleAuditVisible',
            flag: false
          })
        }}
        footer={[
          <Button key="back" onClick={() => {
            dispatch({
              type: 'salesDistributorRegistryApply/toggleAuditVisible',
              flag: false
            })
          }}>关闭</Button>,
          <Button key="submit" type="primary" onClick={() => changeStatus(auditItem.auditType, auditItem.auditFlag, auditItem.auditVersion, auditItem.auditReason)}>确认</Button>
        ]}
      >
        <TextArea rows={4} placeholder={auditFlags[auditItem.auditFlag]+'原因(最多500字)'} value={auditItem.auditReason} maxLength={500}
          onChange={(e) => {
            dispatch({
              type: 'salesDistributorRegistryApply/setAuditReason',
              auditReason: e.target.value
            })
          }
        }/>
        <Loader spinning={loading.effects['salesDistributorRegistryApply/deny']} />
      </Modal>
      <Modal footer={null} visible={editVisible} width={400} style={{top: '200px'}} title={"修改店铺名称"} className={styles.registryModal}
        onCancel={() => toggleEditVisible(false)}
        footer={[
          <Button key="back" onClick={() => {
            dispatch({
              type: 'salesDistributorRegistryApply/toggleEditVisible',
              flag: false
            })
          }}>关闭</Button>,
          <Button key="submit" type="primary" onClick={() => {
            dispatch({
              type: 'salesDistributorRegistryApply/editDisplayName',
              currentItem: currentItem
            })
          }}>确认</Button>
        ]}
      >
        <Input placeholder={"请填写店铺名称"} type="text" value={currentItem.copyDisplayName} maxLength={30} onChange={(e) => setDisplayName(e)}/>
        <Loader spinning={loading.effects['salesDistributorRegistryApply/editDisplayName']} />
      </Modal>
    </div>
  )
}

export default StoreDetailModal;